<!--
 * 基础echarts组件
 * @Author: guoliao
 * @Date: 2024-04-07 09:44:46
 * @LastEditors: guoliao
 * @LastEditTime: 2024-04-29 10:48:36
-->

<script setup lang="ts">
import type { PropType } from 'vue'
import { onMounted, ref, watch } from 'vue'
import type { EChartsCoreOption } from '../../hooks/useEcharts'
import { useEcharts } from '../../hooks/useEcharts' // 引入hooks

const props = defineProps({
  options: { type: Object as PropType<EChartsCoreOption>, required: true },
  height: { type: String, default: '100%' },
  width: { type: String, default: '100%' },
  themeColors: { type: Array as PropType<string[]>, default: () => [] },
})

const echartsRef = ref()

const { setOptions, initCharts } = useEcharts(echartsRef, props.options)

watch(
  () => props.options,
  (nVal) => {
    let targetOptions: EChartsCoreOption = {}
    if (props.themeColors && props.themeColors.length > 0) {
      targetOptions = { ...nVal }
      targetOptions.color = props.themeColors
    }
    else {
      targetOptions = { ...nVal }
    }
    setOptions(targetOptions)
  },
  {
    deep: true,
  },
)

onMounted(() => {
  initCharts()
})
</script>

<template>
  <div
    ref="echartsRef"
    :style="{
      width,
      height,
    }"
  />
</template>
